<template>
  <div class="caseComplaintmodify">
    <div class="caseComplaints">
      <!-- 上 -->
      <div>
        <div class="flex">
          <div class="flex_a">
            <div class="tdboder td-1">会员手机</div>
            <div>
              <el-input
                disabled
                size="mini"
                v-model="detailsList.customerPhone"
              ></el-input>
            </div>
          </div>
          <div class="flex_a">
            <div class="tdboder td-1">会员卡号</div>
            <div>
              <el-input
                size="mini"
                disabled
                v-model="detailsList.cardNum"
              ></el-input>
            </div>
          </div>
          <div class="flex_a">
            <div class="tdboder td-1">会员姓名</div>
            <div>
              <el-input
                size="mini"
                disabled
                v-model="detailsList.customerName"
              ></el-input>
            </div>
          </div>
          <div class="flex_a">
            <div class="tdboder td-1">会员卡类型：</div>
            <div>
              <!-- <el-input :disabled="true" size="mini" v-model="customerrepairorder.customerName" ></el-input> -->
              <el-select
                disabled
                size="mini"
                style="200px"
                v-model="detailsList.cardType"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in cardTypeList"
                  :key="item.value"
                  :label="item.cardSectionName"
                  :value="item.cardId"
                >
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
        <!-- 2 -->
        <div class="flex">
          <div class="flex_a">
            <div class="tdboder td-1">工单类型:</div>
            <div>
              <el-select
                disabled
                size="mini"
                style="200px"
                v-model="detailsList.caseType"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in cardType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="flex_a">
            <div class="tdboder td-1">工单小类</div>
            <div>
              <el-select
                disabled
                size="mini"
                style="200px"
                v-model="detailsList.caseSubType"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in workOrderTypeList"
                  :key="item.value"
                  :label="item.workOrderType"
                  :value="item.caseSubTypeId"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="flex_a">
            <div class="tdboder td-1">工单标题</div>
            <div>
              <el-input
                disabled
                v-model="detailsList.caseSubject"
                size="mini"
              ></el-input>
            </div>
          </div>
        </div>
        <!-- 4 -->
        <div class="flex">
          <div class="flex_a">
            <div class="tdboder td-1">期望完成时间:</div>
            <div>
              <el-date-picker
                disabled
                size="mini"
                v-model="detailsList.specifiedTime"
                type="datetime"
                placeholder="选择日期时间"
                :value-format="format"
              >
              </el-date-picker>
            </div>
          </div>
          <div class="flex_a">
            <div class="tdboder td-1">接收人</div>
            <div>
              <el-input
                disabled
                v-model="detailsList.receiver"
                size="mini"
              ></el-input>
            </div>
          </div>
          <div class="flex_a">
            <div class="tdboder td-1">接收部门</div>
            <div>
              <el-select
                size="mini"
                style="200px"
                v-model="detailsList.receivingDepartment"
                placeholder="请选择"
                clearable
                disabled
              >
                <el-option
                  v-for="item in departmentList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
        <!-- 3 -->
        <div class="flex">
          <div class="tdboder td-1">工单内容</div>
          <div>
            <el-input
              type="textarea"
              style="width: 500px"
              :rows="2"
              placeholder="请输入内容"
              disabled
              v-model="detailsList.caseContent"
            >
            </el-input>
          </div>
        </div>
      </div>
      <!-- 中间 -->
      <div>
        <div class="flex_x">
          <div class="flex_a">
            <div class="tdboder td-1">被投诉人:</div>
            <div>
              <el-input
                disabled
                v-model="detailsList.respondent"
                size="mini"
              ></el-input>
            </div>
          </div>
          <div class="flex_a">
            <div class="tdboder td-1">投诉方式</div>
            <div>
              <el-select
                size="mini"
                style="200px"
                v-model="detailsList.complainWay"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in MeansList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
        <!-- 2 -->
        <div class="flex_x">
          <div class="flex_a">
            <div class="tdboder td-1">投诉原因:</div>
            <div>
              <el-select
                size="mini"
                style="200px"
                v-model="detailsList.complaintReason"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in ReasonList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="flex_a">
            <div class="tdboder td-1">投诉时间</div>
            <div>
              <el-date-picker
                size="mini"
                v-model="detailsList.complaintDate"
                type="datetime"
                placeholder="选择日期时间"
                :value-format="format"
              >
              </el-date-picker>
            </div>
          </div>
        </div>
        <!-- 3 -->
        <div class="flex_x">
          <div class="flex_a">
            <div class="tdboder td-1">投诉分类</div>
            <div>
              <el-select
                size="mini"
                style="200px"
                v-model="detailsList.complaintClassification"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in complainClassifyList"
                  :key="item.value"
                  :label="item.complaintType"
                  :value="item.complaintTypeId"
                >
                </el-option>
              </el-select>
            </div>
            <div class="tdboder td-1">状态</div>
            <div>
              <el-select
                size="mini"
                style="200px"
                v-model="detailsList.guaranteeCase.workOrderStatus"
                placeholder="请选择"
                clearable
              >
                <el-option label="待处理" value="0"></el-option>
                <el-option label="处理完" value="1"></el-option>
                <el-option label="废弃" value="2"></el-option>
              </el-select>
            </div>
          </div>
        </div>
        <!-- 4 -->
        <!-- <div class="flex_x">
        <div class="flex_a">
          <div class="tdboder td-1">投诉的核实</div>
          <div>
            <el-input  v-model="detailsList.confirmationDetails" size="mini"></el-input>
          </div>
        </div>
      </div> -->
      </div>
      <div class="flex_y">
        <div class="tdboder td-1">核实情况</div>
        <div>
          <el-input
            type="textarea"
            style="width: 500px"
            :rows="4"
            v-model="detailsList.confirmationDetails"
            placeholder="请输入内容"
          >
          </el-input>
        </div>
      </div>
      <!-- 赔偿金额 -->
      <div class="flex_y">
        <div class="tdboder td-1">赔偿金额</div>
        <div>
          <el-input
            size="mini"
            style="width: 200px"
            placeholder="请输入赔偿金额"
            v-model.trim="detailsList.compensationAmount"
          >
          </el-input>
        </div>
      </div>
      <!-- 投诉结果 -->
      <div style="display: flex">
        <div class="tdboder tousucss">投诉结果 :</div>
        <div class="tdboder">
          <div style="height: 190px"></div>
          <el-select
            size="mini"
            style="200px"
            v-model="compensationType"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in ReaultList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="tdboder" style="width: 90%">
          <div style="margin: 60px">
            <div class="serviceCompensation" style="display: flex">
              <div class="service-left">服务赔偿</div>
              <div class="service-right">赔偿金额</div>
            </div>
            <div
              class="serviceCompensation-bottom"
              style="display: flex"
              v-for="(item, index) in compensateType"
              :key="index"
            >
              <div class="service-left">
                <el-checkbox @change="changeList(index)">{{
                  item.reimbType
                }}</el-checkbox>
              </div>
              <div class="service-right">
                <el-input
                  size="mini"
                  @input="compensationAmountList"
                  v-model.trim="compensationAmounts[index]"
                  placeholder="请输入金额"
                ></el-input>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex_b">
        <el-button type="primary" @click="casesave()">返回</el-button>
        <el-button
          type="primary"
          style="margin-left: 20px"
          @click="gettransferCount()"
          >转移</el-button
        >
        <el-button
          type="primary"
          style="margin-left: 20px"
          @click="abandoned()"
          >废弃</el-button
        >
        <el-button
          type="primary"
          style="margin-left: 20px"
          @click="getcomplaintEdit()"
          >保存</el-button
        >
      </div>
    </div>
    <!-- 工单转移 -->
    <el-dialog
      title="工单管理-工单转移"
      :visible.sync="transfer"
      width="40%"
      :close-on-click-modal="false"
    >
      <div class="add">
        <div class="header-1">
          <div class="header-1-1-1">
            <div class="tou"></div>
            <span>工单转移</span>
          </div>
        </div>
        <el-form
          style="margin-left: 20px"
          size="mini"
          :inline="true"
          :data="detailsList"
          :model="detailsList"
          class="pop"
        >
          <div class="pop-2">
            <div class="pop-1">
              <div class="invoice-1">
                <span class="invoice-9">接收人</span>
                <el-select
                  v-model="employeeId"
                  size="mini"
                  style="width: 120px"
                  clearable
                >
                  <el-option
                    v-for="item in postslists"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
          <div class="pop-3">
            <el-button
              style="color: #fff; width: 66px"
              size="mini"
              type="primary"
              @click="WorkersChanBaoCun"
              >保存
            </el-button>
            <el-button
              @click="transfer = false"
              style="color: #fff; width: 66px"
              size="mini"
              type="primary"
              >取消
            </el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "caseComplaintmodify",
  data() {
    return {
      // 数据展示
      transfer: false,
      employeeId: "",
      repairOrderList: {},
      detailsList: {
        compensationAmount: "",
        complaintReason: "",
        complainWay: "",
        respondent: "",
        complaintClassification: "",
        cardType: "",
        cardNum: "",
        customerPhone: "",
        customerName: "",
        caseType: "",
        caseSubject: "",
        caseContent: "",
        caseSubType: "",
        specifiedTime: "",
        receiver: "",
        receivingDepartment: "",
        compensationAmount: "",
        confirmationDetails: "",
        guaranteeCase:{
          workOrderStatus:'',
        },
        complaintDate: "",
      },
      caseComplaintId: "",
      Therepairorder: [],
      caseId:'',
      // 工单类型
      mold: [
        {
          value: "hotel",
          label: "酒店",
        },
        {
          value: "flight ",
          label: "机票",
        },
        {
          value: "service ",
          label: "贵宾厅",
        },
        {
          value: "train ",
          label: "火车票",
        },
        {
          value: "customer ",
          label: "会员",
        },
      ],
      // 状态待处理 = 0,处理完 = 1,
      condition: [
        {
          value: 0,
          label: "待处理",
        },
        {
          value: 1,
          label: "处理完",
        },
        {
          value: 2,
          label: "废弃",
        },
      ],

      // 新建弹窗
      centerDialogVisible: false,
      // 创建订单
      repairOrder: {},
      // 会员信息查询
      customerrepairorder: {
        customerName: "",
        customerCard: "",
        customerPhone: "",
      },
      // 初始化数据
      inputaaa: "",
      inputaadf: "",
      compensateType: [],
      compensationType: [],
      input: "",
      textarea2: "",
      radio: "1",
      // 赔偿金额
      compensationAmounts: [],
      // 部门
      departmentList: [],
      // 时间
      format: "yyyy-MM-dd HH:mm:ss",
      // 工单小类
      workOrderTypeList: [],
      // 投诉分类列表
      complainClassifyList: [],
      // 选中理赔
      serviceCompensation: [],
      // 工单类型下拉框
      cardType: [
        {
          value: "ordinary",
          label: "普通",
        },
        {
          value: "derelictionDuty ",
          label: "渎失职",
        },
        {
          value: "claim",
          label: "理赔",
        },
        {
          value: "complaint ",
          label: "投诉",
        },
      ],
      // 卡类型下拉菜单
      cardTypeList: [],
      // 投诉原因
      ReasonList: [],
      // 投诉方式
      MeansList: [],
      // 投诉结果
      ReaultList: [],
      // 员工下拉
      postslists:[],
    };
  },
  props: {},
  components: {},

  methods: {
    casesave() {
      this.$router.go(-1);
    },
    // 查询待修改工单
    getcomplaintById() {
      this.$axios
        .getcomplaintById({
          complaintId: this.caseComplaintId,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "200") {
            console.log(this.detailsList);
            this.detailsList.complaintReason = res.data.complaintReasonId;
            this.detailsList.complainWay = res.data.complaintMeansId;
            this.detailsList.respondent = res.data.complaintEmployeename;
            this.detailsList.complaintClassification = res.data.complaintTypeId;
            this.detailsList.cardType = res.data.guaranteeCase.cardNumberId;
            this.detailsList.cardNum = res.data.guaranteeCase.memberCardNumber;
            this.detailsList.customerPhone =
              res.data.guaranteeCase.memberCellPhone;
            this.detailsList.customerName = res.data.guaranteeCase.memberName;
            this.detailsList.caseType = res.data.guaranteeCase.ticketType;
            this.detailsList.caseSubject = res.data.guaranteeCase.ticketTitle;
            this.detailsList.caseContent =
              res.data.guaranteeCase.workOrderContent;
            this.detailsList.caseSubType = Number(
              res.data.guaranteeCase.workOrderSubclass
            );
            this.detailsList.specifiedTime =
              res.data.guaranteeCase.specifiedTime;
            this.detailsList.receiver = res.data.guaranteeCase.receiver;
            this.detailsList.receivingDepartment =
              res.data.guaranteeCase.receiveDepartmentId;
            this.detailsList.compensationAmount = res.data.reimbursementAmt;
            this.detailsList.confirmationDetails = res.data.confirmationDetails;
            this.detailsList.complaintDate = res.data.complaintDate;
            this.detailsList.guaranteeCase.workOrderStatus = res.data.guaranteeCase.workOrderStatus;
          }
        });
    },
    abandoned() {
      this.detailsList.guaranteeCase.workOrderStatus = 2;
      this.getcomplaintEdit();
    },
    // 编辑工单
    getcomplaintEdit() {
      this.$axios
        .getcomplaintEdit({
          caseComplaintId: this.caseComplaintId,
          complaintMeansId: this.detailsList.complainWay,
          complaintDate: this.detailsList.complaintDate,
          reimbursementAmt: this.detailsList.compensationAmount,
          complaintReasonId: this.detailsList.complaintReason,
          confirmationDetails: this.detailsList.confirmationDetails,
          complaintTypeId: this.detailsList.complaintClassification,
          guaranteeCase:{
          caseId: this.caseId,
          workOrderStatus:this.detailsList.guaranteeCase.workOrderStatus
          }
        })
        .then((res) => {
          console.log(res);
          if (res.code == "200") {
            this.$message({
              message: "修改成功",
              type: "success",
            });
            this.$router.go(-1);
          }
        });
    },

    gettransferCount() {
      this.transfer = true;
      console.log(this.detailsList);
    },
    // 工单转移
    WorkersChanBaoCun() {
      let arr = {
        ids: [this.caseId],
        employeeId: Number(this.employeeId),
      };
      if (this.employeeId != null) {
        localStorage.setItem("isToken", true);
        this.$axios.gettransferCount(arr).then((res) => {
          
          console.log(res);
          if (res.code == 200) {
            this.transfer = false;
            this.$message({
              message: "转移成功",
              type: "success",
            });
            this.$router.go(-1);
          } else {
            this.$message({
              message: "转移失败！！！！！",
              type: "warning",
            });
          }
        });
      } else {
        this.$message({
          message: "请选择转移人员",
          type: "warning",
        });
      }
    },
    changeList(row) {
      // let arr = this.compensateType
      // console.log(this.compensateType)
      // arr[row].is = !arr[row].is
      // let arr1 = []
      // arr1 = arr.filter((item)=>{
      //     return item.is
      // });
      // this.servicepComensation = arr1
      // console.log(this.servicepComensation)
      this.serviceCompensation = row;
    },
    // 赔偿金额事件
    compensationAmountList(row) {
      console.log(row);
      this.compensationAmount = row;
    },
    // 服务赔偿列表
    getcaseReimbTypeList() {
      this.$axios.getcaseReimbTypeList({}).then((res) => {
        if (res.code == "200") {
          let arr = JSON.parse(JSON.stringify(res.data));
          arr.forEach((item) => {
            item.is = false;
          });
          this.compensateType = arr;
          console.log(this.compensateType);
        }
      });
    },
    // 投诉结果
    getselectReaultList() {
      this.$axios.getselectReaultList({}).then((res) => {
        console.log(res);
        if (res.code == "200") {
          let list = JSON.parse(JSON.stringify(res.data));
          this.ReaultList = list.map((item) => {
            return {
              label: item.complaintReault,
              value: item.complaintReaultId,
            };
          });
          console.log(this.ReaultList);
        }
      });
    },
    // 投诉分类
    getselectTypeList() {
      this.$axios.getselectTypeList({}).then((res) => {
        console.log(res);
        if (res.code == "200") {
          this.complainClassifyList = res.data;
          console.log(this.complainClassifyList);
        }
      });
    },
    // 投诉原因
    getselectReasonList() {
      this.$axios.getselectReasonList({}).then((res) => {
        console.log(res);
        if (res.code == "200") {
          let list = JSON.parse(JSON.stringify(res.data));
          this.ReasonList = list.map((item) => {
            return {
              label: item.complaintReason,
              value: item.complaintReasonId,
            };
          });
          console.log(this.ReasonList);
        }
      });
    },
    // 投诉方式
    getselectMeansList() {
      this.$axios.getselectMeansList({}).then((res) => {
        console.log(res);
        if (res.code == "200") {
          let list = JSON.parse(JSON.stringify(res.data));
          this.MeansList = list.map((item) => {
            return { label: item.complaintMeans, value: item.complaintMeansId };
          });
          console.log(this.MeansList);
        }
      });
    },
    // 创建部门
    geteedepartmentlist() {
      this.$axios.geteedepartmentlist({}).then((res) => {
        console.log(res);
        if (res.code == "200") {
          let list = JSON.parse(JSON.stringify(res.data));
          this.departmentList = list.map((item) => {
            return { label: item.deptName, value: item.deptId };
          });
          console.log(this.departmentList);
        }
      });
    },
    // 工单小类
    getselectworkOrderType() {
      this.$axios.getselectworkOrderType({}).then((res) => {
        console.log(res);
        if (res.code == "200") {
          this.workOrderTypeList = res.data;
          console.log(this.workOrderTypeList);
        }
      });
    },
    // 卡类型
    getcardlist() {
      this.$axios.getcardlist({}).then((res) => {
        if (res.code == 200) {
          this.cardTypeList = res.data;
        }
      });
    },
    // 员工下拉
    postslist() {
      localStorage.removeItem("pageSize");
      localStorage.removeItem("pageNum");
      this.$axios
        .postslist({
          deptId: this.receivingDepartment,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "200") {
            localStorage.setItem("pageSize", 10);
          localStorage.setItem("pageNum", 1);
            let list = JSON.parse(JSON.stringify(res.data));
            this.postslists = list.map((item) => {
              return {
                label: item.employeeName,
                value: item.employeeId,
              };
            });
            console.log(this.postslists);
          }
        });
    },
  },
  mounted() {
    this.caseComplaintId = this.$route.params.caseComplaintId;
    this.caseId = this.$route.params.caseId;
    console.log(this.$route.params);
    // 查询待修改工单
    this.getcomplaintById();
    // 投诉结果
    this.getselectReaultList();
    // 投诉原因
    this.getselectReasonList();
    // 投诉方式
    this.getselectMeansList();
    // 服务赔偿
    this.getcaseReimbTypeList();
    // 创建部门
    this.geteedepartmentlist();
    // 工单小类
    this.getselectworkOrderType();
    // 投书方式
    this.getselectTypeList();
    // 卡类型
    this.getcardlist();
    // 员工下拉
    this.postslist()
  },
};
</script>

<style scoped>
.caseComplaints {
  margin: auto;
  margin: 20px;
  width: 90%;
  border: 1px solid #add8ea;
}
.flex {
  display: flex;
  margin-bottom: 10px;
}
.flex_x {
  width: 40%;
  display: flex;
  margin-top: 10px;
}
.flex_y {
  width: 80%;
  display: flex;
  margin-top: 10px;
}
.tdboder {
  border: 0.5px solid #add8ea;
}
.td-1 {
  width: 150px;
  background-color: #f2f7fa;
}

.flex_b {
  display: flex;
  justify-content: center;
  padding: 5px;
}
.flex_a {
  display: flex;
  margin-right: 20px;
}
.line {
  width: 100%;
  height: 1px;
  background-color: #add8ea;
}
.tousucss {
  width: 100px;
  height: 400px;
  line-height: 400px;
}
.serviceCompensation {
  width: 700px;
  background-color: #bbd9e6;
  border: 1px solid #3f7e99;
}
.serviceCompensation-bottom {
  width: 700px;
  border: 1px solid #3f7e99;
  border-top: 0px solid #3f7e99;
}
.service-left {
  margin-left: 10px;
  width: 350px;
  border-right: 1px solid #488ba8;
}
.service-right {
  width: 350px;
  text-align: center;
}
.tou {
  width: 3.5px;
  height: 17px;
  background-color: #4b71bf;
  margin-top: 2px;
  margin-right: 4px;
  font-size: 12px;
  margin-bottom: 25px;
}
.header-1-1 {
  font-weight: bolder;
  display: flex;
  margin-left: 20px;
  padding-top: 20px;
}
.header-1-1-1 {
  font-weight: bolder;
  display: flex;
  margin-left: 20px;
  /* padding-top: 20px; */
}
.invoice {
  width: 97%;
  margin: auto;
  display: flex;
  height: 44px;
  margin-bottom: 20px;
  min-width: 1200px;
}
.invoice-1 {
  margin-right: 20px;
}
.invoice-2 {
  margin-left: 20px;
}
.tuo-1 {
  display: flex;
}
.tuo-2 {
  width: 3.5px;
  height: 17px;
  background-color: #4b71bf;
  margin-top: 2px;
  margin-right: 4px;
  font-size: 12px;
  margin-bottom: 25px;
}
.tuo {
  font-weight: bolder;
  display: flex;
  margin-left: 20px;
  padding-top: 20px;
  justify-content: space-between;
  margin-right: 20px;
}
.pop-3 {
  margin-left: 20px;
  margin-top: 40px;
}
</style>